<script setup lang="ts">
import { reactive } from 'vue';
// 注册验证规则
import { registerRules } from '../utils/rules';
// hook
import { useUserStoreHook } from '@/store/modules/user';
// 过渡动画
import Motion from '../utils/motion';
// 中英文切换
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

// 表单数据
const loginForm = reactive({
	username: '',
	email: '',
	phone: '',
	captcha: '',
	password1: '',
	password2: '',
	havingRead: false,
	emailCaptcha: ''
});
// let captchaLoading = ref(false);
</script>
<template>
	<el-form :model="loginForm" :rules="registerRules" ref="ruleFormRef">
		<!-- 账号 -->
		<Motion :delay="100">
			<el-form-item prop="username" class="mt-6">
				<el-input v-model="loginForm.username" :placeholder="t('login.username')" clearable>
					<template #prefix>
						<svg-icon icon-class="login-account" class="login-iconSize" />
					</template>
				</el-input>
			</el-form-item>
		</Motion>
		<!-- 邮箱 -->
		<!-- <Motion :delay="150">
			<el-form-item prop="email">
				<el-input v-model="loginForm.email" placeholder="邮箱" clearable>
					<template #prefix>
						<svg-icon icon-class="login-email" class="login-iconSize" />
					</template>
				</el-input>
			</el-form-item>
		</Motion> -->
		<!-- 验证码 -->
		<!-- <Motion :delay="200">
			<el-form-item prop="captcha" class="phoneCode between-box">
				<el-input v-model="loginForm.captcha" placeholder="6位验证码" clearable>
					<template #prefix>
						<svg-icon icon-class="login-captcha" class="login-iconSize" />
					</template>
				</el-input>
				<el-button type="primary" plain size="large" class="btn-green" :loading="captchaLoading">
					获取验证码
				</el-button>
			</el-form-item>
		</Motion> -->

		<!-- 手机号 -->
		<Motion :delay="250">
			<el-form-item prop="phone">
				<el-input v-model="loginForm.phone" :placeholder="t('login.phone')" clearable>
					<template #prefix>
						<svg-icon icon-class="login-phone" class="login-iconSize" />
					</template>
				</el-input>
			</el-form-item>
		</Motion>

		<!-- 验证码 -->
		<Motion :delay="300">
			<el-form-item prop="captcha" class="phoneCode between-box">
				<el-input v-model="loginForm.captcha" :placeholder="t('login.smsVerifyCode')" clearable>
					<template #prefix>
						<svg-icon icon-class="login-captcha" class="login-iconSize" />
					</template>
				</el-input>
				<el-button plain size="large" class="ml-8">{{ t('login.getVerifyCode') }}</el-button>
			</el-form-item>
		</Motion>

		<!-- 密码 -->
		<Motion :delay="350">
			<el-form-item prop="password1">
				<el-input
					v-model="loginForm.password1"
					:placeholder="t('login.password')"
					type="password"
					clearable
					show-password>
					<template #prefix>
						<svg-icon icon-class="login-password" class="login-iconSize" />
					</template>
				</el-input>
			</el-form-item>
		</Motion>

		<!-- 确认密码 -->
		<Motion :delay="400">
			<el-form-item prop="password2">
				<el-input
					v-model="loginForm.password2"
					:placeholder="t('login.sure')"
					type="password"
					clearable
					show-password>
					<template #prefix>
						<svg-icon icon-class="login-password" class="login-iconSize" />
					</template>
				</el-input>
			</el-form-item>
		</Motion>

		<Motion :delay="450">
			<el-form-item>
				<div class="flex items-center justify-start w-full">
					<!-- 我已仔细阅读并接受 -->
					<el-checkbox :model-value="loginForm.havingRead">{{ t('login.readAccept') }}</el-checkbox>
					<!-- 《隐私政策》 -->
					<span :style="{ color: '#459FFC' }">{{ t('login.privacyPolicy') }}</span>
				</div>
			</el-form-item>
		</Motion>

		<!-- 确定按钮 -->
		<Motion :delay="500">
			<el-form-item>
				<el-button type="primary" class="w-full btn-green">{{ t('login.register') }}</el-button>
			</el-form-item>
		</Motion>

		<!-- 返回按钮 -->
		<Motion :delay="550">
			<el-form-item>
				<el-button class="w-full btn-white" @click="useUserStoreHook().SET_CURRENTPAGE(0)">
					{{ t('login.back') }}
				</el-button>
			</el-form-item>
		</Motion>
	</el-form>
</template>
